<template>
  <div>
    <div>
      <el-form :inline="true" size="medium">
        <el-form-item clearable label="审核状态：">
          <el-select v-model="queryObj.audit_status" placeholder="全部">
            <el-option
              v-for="(item, key) in statusList"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item clearable label="拼购状态：">
          <el-select v-model="queryObj.group_purchase_type" placeholder="全部">
            <el-option
              v-for="(item, key) in typeList"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="拼购名称：">
          <el-input placeholder="请输入拼购名称" v-model="queryObj.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMainListReset"
            ><i class="iconfont icon-search"></i>查询</el-button
          >
          <el-button type="primary" size="medium" @click="goto('')"
            ><i class="iconfont icon-plus"></i>添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        tooltip-effect="dark"
        stripe
        style="width: 100%"
      >
        <el-table-column label="拼购ID" prop="gp_id">
        </el-table-column>
        <el-table-column
          label="拼购名称"
          show-overflow-tooltip
          prop="group_purchase_name"
        >
        </el-table-column>
        <el-table-column width="100" label="拼购价">
          <template slot-scope="scope">
            {{ scope.row.group_purchase_price }}
          </template>
        </el-table-column>
        <el-table-column label="成团人数" prop="user_count"> </el-table-column>
        
        <el-table-column width="120">
          <template slot="header">
            <span>成人利润（元）</span>
          </template>
          <template slot-scope="scope">
            {{ scope.row.cb_price_lr }}
          </template>
        </el-table-column>
        <el-table-column width="120">
          <template slot="header">
            <span>儿童利润（元）</span>
          </template>
          <template slot-scope="scope">
            {{ scope.row.child_cb_price_lr }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.group_release"
              @change="statusChange($event, scope.row)"
              active-text="上架"
              inactive-text="下架"
              :active-value="2"
              :inactive-value="9"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <p>{{ statusList[scope.row.audit_status] }}</p>
            <el-button
              v-if="scope.row.audit_status != 3"
              type="text"
              @click="openAuditDlg(scope.row)"
              >审核详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="拼购时间">
          <template slot-scope="scope">
            {{ scope.row.start_time | formatDate('yyyy-MM-dd hh:mm:ss') }} ---- {{ scope.row.end_time | formatDate('yyyy-MM-dd hh:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="拼购状态">
          <template slot-scope="scope">
            {{ typeList[scope.row.group_purchase_status] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="golook(scope.row)"
              ><i class="iconfont icon-liulan"></i>查看</el-button
            >
            <el-button type="text" @click="goto(scope.row)"
              ><i class="iconfont icon-edit"></i>编辑</el-button
            >
            <el-button type="text" @click="del(scope.row)"
              ><i class="iconfont icon-del"></i>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total"
      >
      </el-pagination>
    </div>

    <!-- // 审核详情对话框 -->
    <el-dialog title="审核详情" :visible.sync="dialogTableVisible" width="700">
      <el-table :data="auditList">
        <el-table-column label="审核时间" width="100">
          <template slot-scope="scope">
            <p>{{ scope.row.init_time | formatDate('yyyy-MM-dd hh:mm:ss') }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="审核人员"></el-table-column>
        <el-table-column label="审核结果">
          <template slot-scope="scope">
            <p>{{ statusList[scope.row.audit_status] }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="反馈详情"></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button type="primary" @click="dialogTableVisible = false"
          >关 闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGroupPurchaseList,
  deleteGroupPurchase,
  updateGroupRelease,
  getAuditList
} from 'api/marketingManagement/groupBuying';
import { line_audit_status, line_status } from 'common/config/constConfig';
import { pageSizeArr } from 'common/config/constConfig';
import config from 'api/config';

export default {
  components: {},
  computed: {},
  data() {
    return {
      statusList: line_audit_status,
      lineStatus: line_status,
      dialogMode: 'add',
      typeList: {
        0: '未开始',
        1: '进行中',
        2: '已结束'
      },
      showList: {
        1: '显示',
        0: '不显示'
      },
      auditList: [],
      imgUrl: config.imgUrl,
      dialogTableVisible: false,
      pageSizeArr,
      queryObj: {},
      mainList: [],
      seriesList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    openAuditDlg(row) {
      this.dialogTableVisible = true;
      this.auditList = [];
      // 获取详情
      this._getAuditList(row);
    },
    // 获取审核详情
    async _getAuditList(row) {
      let data = {
        gp_id: row.gp_id
      };
      let res = await getAuditList(data);
      this.auditList = res.rData;
    },
    goto(row) {
      // ..
      if (row) {
        if (row.group_release == 2) {
          this.$confirm('编辑产品前要下架该产品，是否立即下架?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.statusChange(9, row);
          });
        } else {
          this.$router.push({
            path: '/home/groupBuyingAdd',
            query: { id: row.gp_id, type: 'edit' }
          });
        }
      } else {
        this.$router.push('/home/groupBuyingAdd');
      }
    },
    golook(row) {
      this.$router.push({
        path: '/home/groupBuyingAdd',
        query: { id: row.gp_id, type: 'look' }
      });
    },
    async statusChange(val, row) {
      await updateGroupRelease({
        gp_id: row.gp_id,
        group_release: row.group_release
      });
      this._caozuoAfter('发送请求成功');
    },
    del(row) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(row);
      });
    },
    _del(row) {
      deleteGroupPurchase(row.gp_id).then(res => {
        this._caozuoAfter(res.rMsg);
      });
    },
    _caozuoAfter(msg) {
      this.dialogFormVisible = false;
      this.$message({
        message: msg,
        type: 'success'
      });
      this._mainList();
    },
    getMainListReset() {
      this.page.page = 1;
      this._mainList();
    },
    changeMoney(arr) {
      arr.forEach(item => {
        item.cb_price_lr = (item.group_purchase_price - item.cb_price) / 100;
        item.child_cb_price_lr = (item.group_purchase_price - item.child_cb_price) / 100;
        item.group_purchase_price /= 100;
      });
      return arr;
    },
    // 获取
    _mainList() {
      let data = { ...this.queryObj };
      data.pageInfo = { ...this.page };
      getGroupPurchaseList(data).then(res => {
        let pageInfo = res.pageInfo;
        this.page.total = pageInfo.Total;
        this.page.page = pageInfo.page;
        this.mainList = this.changeMoney(res.rData);
      });
    },
  },
  created() {
    this._mainList();
  }
};
</script>

<style lang="scss" scoped></style>
